
<template>
  <!-- active:{{ active }} -->
  <!-- 首页 -->
  <div class="index" v-if="active == 0">
    <!-- 搜索框 -->
    <van-search shape="round" v-model="value" placeholder="搜索:目的地/酒店/景点/航班号" />
    <!--轮播-->
    <van-swipe class="my-swipe" :loop=false indicator-color="skyblue" @change="onChange">
      <van-swipe-item>
        <!-- 宫格 -->
        <div class="gridMainDiv">
          <van-grid :border="false">
            <div :style="{backgroundImage:value.color,backgroundColor:value.color}"
            v-for="value in gridData"
              class="gridDiv"
            >
              <van-grid-item :key="value.id" :icon="value.img" :text="value.name" />
            </div>
          </van-grid>
        </div>
      </van-swipe-item>
      <van-swipe-item :style="{height: height+'px'}">
        <!-- 宫格 -->
        <div class="gridOthDiv">
            <van-grid :border="false">
              <div 
              :style="{backgroundImage:value.color,backgroundColor:value.color}"
                v-for="value in gridDatas" class="gridDiv">
                <van-grid-item :key="value.id" :icon="value.img" :text="value.name" />
              </div>
            </van-grid>
          </div>
      </van-swipe-item>
      <template #indicator="{ active, total }">
        <div style="text-align: center;">
          <div :class="active == 0?'swipeIndicatorActive':'swipeIndicatorInactive'"> </div>
          <div :class="active == 1?'swipeIndicatorActive':'swipeIndicatorInactive'"> </div>
        </div>
      </template>
    </van-swipe>
    <van-row>
      <van-col span="12">
        <!-- 特价直播 -->
        <div class="myDiv">
          <van-row>
            <van-col span="10">
              <van-image
              width="73"
              height="20"
              src="https://images4.c-ctrip.com/target/0zc71120008g0ha4z93C6.png"
            />
            </van-col>
            <van-col span="14" style="text-align: right;">
              <van-tag size="medium" color="#ffebe3" text-color="#ff4607" >特价好货直播中</van-tag>
            </van-col>
          </van-row>
          <div class="swipeDiv">
            <van-swipe class="my-swipe1" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="image in images" :key="image" style="height: 100px;" fit="contain">
                <img :src="image" />
              </van-swipe-item>
            </van-swipe>
          </div>
          </div>
      </van-col>
      <van-col span="12">
        <!-- 携程精选榜 -->
        <div class="myDiv">
          <!-- 布局设计2 -->
          <van-row>
            <van-col span="10">
              <van-image
              width="73"
              height="20"
              src="https://images4.c-ctrip.com/target/0zc6g120008g0hcb587E5.png"
            />
            </van-col>
            <van-col span="14" style="text-align: right;">
              <van-tag size="medium" color="#fdefd2" text-color="#ae6e15" >权威排行榜</van-tag>
            </van-col>
          </van-row>
          <van-row>
              <van-col span="12">
              <van-image
              width="80"
              height="100"
              src="https://dimg04.c-ctrip.com/images/0100k120009i7aur9747D_R_238_268.jpg"
            />
              </van-col>
              <van-col span="12">
              <van-image
              width="80"
              height="100"
              src="https://dimg04.c-ctrip.com/images/0100k120009i7aur9747D_R_238_268.jpg"
            />
              </van-col>
            </van-row>
        </div>
      </van-col>
    </van-row>
    <!-- 广告 -->
    <div style="display: block;float: initial;margin: 20px 10px 20px 10px;">
      <img src="https://dimg04.c-ctrip.com/images/0zg6z120009hxl5q9CCF7.jpg"
      style="width: 95%; height: 120px; left: 0px; top: 0px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 0px;margin-left: 2%;margin-right: auto;" />
    </div>
    <!-- 版权信息 -->
    <div style="margin-top: 30px;color: #666;">
      <div style="display: inline;">
        <van-button style="margin-left: 20%;" type="default">
          <van-icon name="phone-o" />电话预定
        </van-button>
        <van-button style="margin-left: 10%;" type="default">
          <van-icon name="down" />下载携程
        </van-button>
      </div>
      <div style="text-align: center;margin-top: 30px;color: #666;">
        <a>网站地图 | 电脑版</a>
      </div>
      <div style="text-align: center;margin-top: 30px;color: #666;">
        <a>©02023携程旅行 沪ICP备08023580号</a><br><br><br><br>
      </div>
    </div>
    <!-- 每日签到按钮 -->
    <van-sticky style="text-align: right;" :offset-bottom="50" position="bottom">
      <van-image 
      width="85"
      height="90"
      src="https://webresource.c-ctrip.com/NFES/html5/1688026760894/_next/serverStatic/img/signin-d.png" />
    </van-sticky>
  </div>
  <!-- 社区 -->
  <div class="community" v-if="active == 1">
    <!-- van-nav-bar -->
    <van-nav-bar title="" left-text="返回">
      <template #left>
        <van-icon name="arrow-left" @click="onClickLeft" size="21px" color="rgb(51,51,51)"/>
        <div @click="onClickToPage" style="color: #222222;font-weight: 700;font-size: 15px;">全球 <van-icon name="arrow-down" size="12px" color="rgb(51,51,51)"/></div>
        <!-- 搜索框 -->
        <van-search shape="round" v-model="value" placeholder="搜索:目的地/景点/话题" />
      </template>
      <template #right>
        <van-image
          round
          width="21px"
          height="21px"
          src="https://pages.c-ctrip.com/you/lvpai-home-defaultavat.jpg"
        />
      </template>
    </van-nav-bar>
    <!-- 使用布局去做 -->
    <!-- <van-row>
      <van-col span="4">
        <van-icon name="arrow-left" @click="onClickLeft" size="21px" color="rgb(51,51,51)"/>
        <div @click="onClickToPage" style="color: #222222;font-weight: 700;font-size: 15px;">全球 <van-icon name="arrow-down" size="12px" color="rgb(51,51,51)"/></div>
      </van-col>
      <van-col span="16"> 
        <van-search shape="round" v-model="value" placeholder="搜索:目的地/酒店/景点/航班号" />
      </van-col>
      <van-col span="4">
        <van-image
          round
          width="21px"
          height="21px"
          src="https://pages.c-ctrip.com/you/lvpai-home-defaultavat.jpg"
        />
      </van-col>
    </van-row> -->
    <!-- tab -->
    <van-tabs color="#2fcfbb" title-active-color="#222222" title-inactive-color="#222222" v-model:active="tabActive">
      <van-tab v-for="(value,index) in tabData" :title="value">
        <div v-if="tabActive == 2" class="myCard" v-for="item in myCardData">
          <van-image
            height="253.44"
            :src="item.img"
          />
          <van-text-ellipsis class="title" rows="2" :content="item.title" />
          <div class="bottom">
            <van-row>
            <van-col span="18">
              <van-image
                round
                width="24"
                height="24"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
              />
              <van-text-ellipsis class="username" :content="item.username" />
            </van-col>
            <van-col span="6">
              <div class="icon">
                <van-icon size="18" :name="item.userPhoto"></van-icon>
              </div>
              <div class="num">{{ item.num }}</div>
            </van-col>
          </van-row>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 发布送积分按钮 -->
    <van-sticky style="text-align: center;" :offset-bottom="50" position="bottom">
      <van-image 
        width="85"
        height="90"
        src="https://pages.c-ctrip.com/you/livestream/lvpai_publish_new_btn.png" />
    </van-sticky>
  </div>
  <!-- 消息 -->
  <div v-if="active == 2">
    <div>
    <van-nav-bar
    title="消息"
    left-arrow
    @click-left="onClickLeft"
    />
  </div>
  <div>
    <van-grid>
      <van-grid-item icon="https://images4.c-ctrip.com/target/0zc07120008q3qqng006D.png" text="订单出行" />
      <van-grid-item icon="https://images4.c-ctrip.com/target/0zc5u120008q3qijiFF72.png" text="互动消息" />
      <van-grid-item icon="https://images4.c-ctrip.com/target/0zc3l120008q3q9pf4719.png" text="账户通知" />
      <van-grid-item icon="https://dimg04.c-ctrip.com/images/0AS5y120009dnp0ewAB3D.png" text="会员服务" />
    </van-grid>
  </div>
  <van-cell-group inset>
  <van-cell title="多多" value="多多" label="想男友的第一天" />
  <van-cell title="李强" value="李强" label="家里好冷，冻死了" />
  <van-cell title="潘子" value="潘子" label="大哥还不回来？" />
</van-cell-group>
  <!-- 客服消息 -->
  <van-sticky style="text-align: right;" :offset-bottom="50" position="bottom">
      <van-image 
      width="85"
      height="90"
      src="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />
    </van-sticky>
  </div>
  <div v-if="active == 3">
    <!-- 表单 -->
    <van-nav-bar
    title="手机快捷登录"
    left-arrow
    @click-left="onClickLeft"
    />
    <van-cell-group inset>
      <van-field
          v-model="phone"
          name="phone"
          placeholder="中国大陆+86                                                   >"
        />
        <van-field
          v-model="phone"
          name="phone"
          placeholder="注册或绑定手机号"
        />
        <van-row>
          <van-col span="18">
        <van-field
          v-model="password"
          name="password"
          placeholder="短信动态码"
        /></van-col>
      <van-col span="6">
        <span class="btn-primary-s"  color="#099fde" style="display: inline-block;" >发送动态码</span>
      </van-col>
      </van-row>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button block native-type="submit" style="color: #999">
          登录
        </van-button>
        <div>
          <span style="color: #999;font-size: .75rem;">账号密码登录</span>
          <span style="color: #999;font-size: .75rem;">境外手机登录</span>
        </div>
        <van-image
  width="375"
  height="200"
  fit="contain"
  position="bottom"
  src="src\666666.jpg"
/>
        <van-radio-group v-model="checked">
          <van-radio name="1" style="text-align: center;margin-top: 10px;color: #999;font-size: .75rem;" position="bottom">
            <span class="agreement__text" tabindex="-1">
                                      
                                      阅读并同意携程的<a class="" target="_blank" href="https://m.ctrip.com/webapp/abouth5/common/agreement?type=1&amp;back=true&amp;header=true" rel="noreferrer">《
                                      <!-- -->
                                      服务协议
                                      <!-- -->
                                      》</a>
                                      和<a class="" target="_blank" href="https://contents.ctrip.com/huodong/privacypolicyh5/index?type=2" rel="noreferrer">《
                                      <!-- -->
                                      个人信息保护政策
                                      <!-- -->
                                      》</a>
                                  </span>
                              
          </van-radio>
        </van-radio-group>
      </div>
      
  </div>
  <!-- 底部导航栏 -->
  <van-tabbar v-if="!hidden" @change="onTabBarChange" inactive-color="#666666" v-model="active">
    <!-- --van-tabbar-item-text-color 设置导航栏选中的标签的文字颜色 -->
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="miniprogram-o">社区</van-tabbar-item>
    <van-tabbar-item icon="chat-o">消息</van-tabbar-item>
    <van-tabbar-item icon="contact">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script setup>
  import { ref } from 'vue';
  import { showToast } from 'vant';
  import 'vant/es/toast/style';
  //单选按钮
  const checked = ref('0');
  // 社区页面的变量以及方法
  const myCardData=[
  {
      img:"https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
      title:"7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
      username:"红豆带你吃喝玩乐",
      userPhoto:"https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
      num:"23",
      // 是否点赞
    },
    {
      img:"https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
      title:"7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
      username:"红豆带你吃喝玩乐",
      userPhoto:"https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
      num:"23",
      // 是否点赞
    },
    {
      img:"https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
      title:"7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
      username:"红豆带你吃喝玩乐",
      userPhoto:"https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
      num:"23",
      // 是否点赞
    },
    {
      img:"https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
      title:"7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
      username:"红豆带你吃喝玩乐",
      userPhoto:"https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
      num:"23",
      // 是否点赞
    },
    {
      img:"https://dimg04.c-ctrip.com/images/1me2y12000bml23heAE10_R_640_10000_Q90.jpg?proc=source/tripcommunity",
      title:"7-8月最适合去的旅游地推荐：舒适好玩又避暑！不看后悔",
      username:"红豆带你吃喝玩乐",
      userPhoto:"https://pages.c-ctrip.com/you/livestream/lvpai_detail_commentprise.png",
      num:"23",
      // 是否点赞
    },
  ]
  const onClickLeft = () => {
    // 返回到首页
    active.value = 0
    // 显示tabbar
    hidden.value = false
  }
  const onClickToPage = () => {
    showToast({
      message: '跳转到全球页',
      position: 'top',
    });
  }
  const tabActive = ref(0)
  const tabData = ["发现","徒步","避暑","看海","玩乐","酒店","美食"]
  // 首页搜索框
  const value = ref('');
  // 首页宫格的数组
  const gridData = [
    {   
        id:"1",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel.png",
        name:"酒店",
        color:"-webkit-gradient(linear,left top,left bottom,from(#fa5956),to(#fb8650))",
    },
    {   
        id:"2",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/flight.png",
        name:"机票",
        color:"-webkit-gradient(linear,left top,left bottom,from(#3c83fa),to(#50b2fa))",
    },
    {   
        id:"3",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/train_ticket.png",
        name:"火车票",
        color:"-webkit-gradient(linear,left bottom,left top,from(#66a4ff),to(#5e80ff))",
    },
    {   
        id:"4",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/vacation.png",
        name:"旅游",
        color:"-webkit-gradient(linear,left top,left bottom,from(#2fc3b6),to(#52d9b3))",
    },
    {   
        id:"5",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/gs.png",
        name:"攻略",
        color:"-webkit-gradient(linear,left bottom,left top,from(#ffa846),color-stop(99%,#ff8939))",
    },
    {   
        id:"6",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel_inn.png",
        name:"民宿",
        color:"#fff5f1",
    },
    {   
        id:"7",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/flight_package.png",
        name:"机+酒",
        color:"#eff9ff",
    },
    {   
        id:"8",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/bus_ticket.png",
        name:"汽车",
        color:"#f2f5ff",
    },
    {   
        id:"9",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/ticket.png",
        name:"门票",
        color:"#ecfcf8",
    },
    {   
        id:"10",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/food.png",
        name:"美食",
        color:"#fff9f2",
    },
    {   
        id:"11",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/hotel_sale.png",
        name:"特价",
        color:"#fff5f1",
    },
    {   
        id:"12",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/airport_transfer.png",
        name:"接送机",
        color:"#eff9ff",
    },
    {   
        id:"13",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/car.png",
        name:"租车",
        color:"#f2f5ff",
    },
    {   
        id:"14",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/weekend.png",
        name:"周边游",
        color:"#ecfcf8",
    },
    {   
        id:"15",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/main/shop.png",
        name:"购物",
        color:"#fff9f2",
    },
  ]
  // 其他宫格的数组
  const gridDatas = [
  {   
        id:"1",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/hpgs_guide.png",
        name:"向导/包车",
    },
    {   
        id:"2",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/insurance.png",
        name:"保险",
    },
    {   
        id:"3",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/vtm.png",
        name:"微领队",
    },
    {   
        id:"4",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/oneday.png",
        name:"一日游",
    },
    {   
        id:"5",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/custom.png",
        name:"定制游",
    },
    {   
        id:"6",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/cruise.png",
        name:"游轮",
    },
    {   
        id:"7",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/exchange.png",
        name:"外币兑换",
    },
    {   
        id:"8",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/visa.png",
        name:"签证",
    },
    {   
        id:"9",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/wifi.png",
        name:"WiFi电话卡",
    },
    {   
        id:"10",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/bag.png",
        name:"行李机房",
    },
    {   
        id:"11",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/lvpai.png",
        name:"旅拍'跟拍",
    },
    {   
        id:"12",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/flight_schedule.png",
        name:"航班助手",
    },
    {   
        id:"13",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/cost.png",
        name:"拿去花",
    },
    {   
        id:"14",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/gift_card.png",
        name:"礼品卡",
    },
    {   
        id:"15",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/credit_card.png",
        name:"信用卡",
    },
    {   
        id:"16",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/member.png",
        name:"会员/签到",
    },
    {   
        id:"17",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/supermember.png",
        name:"超值旅行家",
    },
    {   
        id:"18",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/rewards.png",
        name:"会员商城",
    },
    {   
        id:"19",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/xiaoshiji.png",
        name:"携程小诗机",
    },
    {   
        id:"20",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/sos.png",
        name:"紧急救援",
    },
    {   
        id:"21",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/cooperation.png",
        name:"加盟合作",
    },
    {   
        id:"22",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/mice.png",
        name:"会展旅游",
    },
    {   
        id:"23",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/corpctrip.png",
        name:"企业差旅",
    },
    {   
        id:"24",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/healthy.png",
        name:"核酸检测",
    },
    {   
        id:"25",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/trip.png",
        name:"Trip.com",
    },
    {   
        id:"26",
        img:"https://pic.c-ctrip.com/pic/platform/bbz/h5/h5home/v1/nav/sub/aria.png",
        name:"关怀版",
    },
  ]

  // 轮播的高度
  const height = ref(184)
  // 轮播切换的事件
  const onChange = (index) => {
    if (index == 1) {
      // 当轮播切换到第二张的时候，增大轮播高度
      // height：354
      // height.value = 354
      // 184 -> 354 +170
      for(let i = 0;i<=170;i++){
        setTimeout(() => {
          height.value++
        }, 1*i);
      }
    } else {
      // 当轮播切换到第移张的时候，减小轮播高度
      // height：354
      // height.value = 184
      for(let i = 0;i<=170;i++){
        setTimeout(() => {
          height.value--
        }, 1*i);
      }
    }
  }
  //懒加载 特价直播
  const images = [
    'https://images4.c-ctrip.com/target/0201k120009lh6w07B843_D_280_280_R5.jpg',//￥1688
    'https://images4.c-ctrip.com/target/0AD6s120008wr37y87F82_D_280_280_R5.jpg',//￥999
    'https://images4.c-ctrip.com/target/1mc0e12000ah67cjo01FF_D_280_280_R5.jpg'//￥1299
    ];
  // 底部导航栏的变量
  const active = ref(0);
  const hidden = ref(false)
  const phone = ref('');
  const password = ref('');
  const onTabBarChange = (active) => {
    // 当底部导航栏选中 社区、消息、我的时，自动隐藏
    if (active == 0) {
      hidden.value = false
    } else{
      hidden.value = true
    }
  }
  const onSubmit = (values) => {
    console.log('submit', values);
    // values:
    // {
    //   username:'briup',
    //   password:123,
    // }
    const {username,password} = values
    console.log('🤡 CC - onSubmit - username:', username);
    console.log('🤡 CC - onSubmit - username,password:', username,password);
    if (username == 'briup') {
      if (password == 123321) {
        console.log("登录成功");
      }
    }
  };  
</script>
<style>
:root{
    /* --van-tabbar-item-active-color:hotpink; */
    --van-field-placeholder-text-color:#999999;
    --van-search-input-height:30px;
    --van-grid-item-content-background:#00000000;
    --van-nav-bar-icon-color:var(--van-field-placeholder-text-color)
}
body{
  background-color: #f4f4f4;
}
/* 轮播样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #ffffff;
}
.my-swipe1 .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 106px;
    text-align: center;
    background-color: #39a9ed;
  }
</style>
<style lang="less" scoped>
/* 宫格中遍历的元素div */
  .gridMainDiv{
    margin: 12px;
    border-radius: 10px;
    overflow: hidden;
  }
  .gridDiv{
    width:calc(100% / 5);
    display: inline-block;
  }
  /* :deep(.van-grid){
  } */
  :deep(.van-grid-item__content){
    height: 58px;
  }
  /* 首页搜索框 */
  .index{
    :deep(.van-search__content){
      border: 1.8px solid #0086f6;
      background:#ffffff;
    }
  }
  // 社区页样式
  .community{
    .myCard{
      display: inline-block;
      width: calc(50% - 15px);
      margin-left: 10px;
      margin-top: 10px;
      border-radius: 6px;
      background-color: #ffffff;
      overflow: hidden;
      .title{
        color:#222222;
        font-size: 14px;
        margin-top: 8px;
        margin-left: 10px;
        // padding-right: 10px;
        width: 178px;
      }
      .bottom{
        margin: 8px 10px 12px 10px;
      }
      .username{
        float: right;
        width: 91.5px;
        height: 24px;
        line-height: 24px;
        color: #333333;
        font-size: 12px;
      }
      .icon{
        float: left;
        padding-top: 3px;
        padding-left: 10px;

      }
      .num{
        color: #222222;
        font-size: 12px;
        float: right;
        height: 24px;
        line-height: 24px;
      }
    }
    :deep(.van-tabs__wrap){
      margin-bottom: 20px;
    }
    :deep(.van-tab){
      width: 70px;
    }
    :deep(.van-tab--active){
      .van-tab__text{
        font-size: 21px;
        font-weight:400;
      }
    }
    :deep(.van-tab__text){
      font-size: 16px;
    }
    :deep(.van-search__content){
      background:#f4f4f4;
    }
    :deep(.van-icon-search){
      font-size: 14px;
    }
    :deep(.van-search){
      width: 286px;
    }
  }
  :deep(#van-search-1-input){
    font-size: 15px;
  }
  /* 底部导航栏 */
  :deep(.van-tabbar-item--active > .van-tabbar-item__text){
    color:#666666
  }
  /* 轮播图的指示器-公共样式 */
  .swipeIndicatorInactive,.swipeIndicatorActive
  {
    height: 4px;
    border-radius: 2px;
    display: inline-block;
    margin: 0 2px;
  }
  /* 轮播图的指示器-未被选中 */
  .swipeIndicatorInactive{
    width: 4px;
    background-color: #ccc;
  }
  /* 轮播图的指示器被选中 */
  .swipeIndicatorActive{
    width: 14px;
    background-color: #0086f6;
  }
  /* 特价直播div */
  .myDiv{
    width: calc(100% - 28px);
    display: inline-block;
    height: 148px;
    padding: 8px;
    margin-left: 8px;
    border-radius: 8px;
    background: #fff;
    .left,.right{
      // border: 1px solid red;
      // width: calc(50% - 4px);
      height: 20px;
    }
    .left{
      float: left;
      width: 45%;
    }
    .right{
      float: right;
      text-align: right;
      width: 55%;
    }
    // .swipeDiv{
    //   // border: 1px solid red;
    //   width: 100%;
    //   height: 100%;
    // }
  }
</style>